<template>
    <div>
        <div class="reminder" v-if="judge">聊天列表为空</div>
        <div class="contentBox clearfix" v-infinite-scroll="loadMore" infinite-scroll-distance="0">
            <div class="chatBox clearfix"  v-for="(item,index) in list" :key="index" :style="[index>0 ? marginTop : '']" @click="chatHtml(item)">
                <div class="fl imgLeft">
                    <span class="chatImg01 fl">
                        <img :src="item.imagePath?item.imagePath:$defaultSetting.defaultPortrait" alt="">
                    </span>
                    <span class="fl chatListSpan">
                        <font class="provenance fontSize22 color717070">
                            <em class="fl">{{item.nickname}}</em>
                            <img v-show="item.status == 1" class="fl" src="../../assets/img/v.png" width="20" />
                            <em class="colorf1891b fl">{{item.certName}}</em> 
                        </font>
                        <font class="provenanceTiem fontSize22">
                            <em class="color717070">{{$timeCycle(item.createTime, 'ymdhm')}}</em>
                        </font>
                    </span>
                </div>
                <div class="fl imgRight textR">
                    <span class="fontSize30 colorFFF" :class="[item.unReadCount==null ? 'backgroundColor' : '']">{{item.unReadCount==null ? '' : item.unReadCount}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import apiCircle from '../../api/circle'
import { InfiniteScroll } from 'mint-ui'
Vue.use(InfiniteScroll)
export default {
    data(){
        return{
            marginTop:{
              marginTop:'.2rem'  
            },
            list:[],
            pageNum:1,
            count: 0,
            chatType:1,
            id:1,
            userId:this.$route.query.userId,
            judge:false
        }
    },
    methods:{
        loadMore() {
            // 加载更多数据
            this.count += 20
            this.chatList(this.count)
        },
        // 跳转到聊天界面
        chatHtml(item){
            if(this.$isAndroid){
                window.android.startImView(window.location.origin + '/h5ext/#/chat/'+this.userId+'/'+item.sendUserId,JSON.stringify(item))
            }else if(this.$isiOS){
                item.jumpLink = window.location.origin + '/h5ext/#/chat/'+this.userId+'/'+item.sendUserId
                window.webkit.messageHandlers.startImView.postMessage(JSON.stringify(item))
            }
        },
        // 聊天列表  chatType->1   数量排序    chatType -> 时间排序
        chatList(num){
            let params = {recvUserId:this.userId,pageSize:num,pageNum:this.pageNum,chatType:this.chatType}
            apiCircle.listReadStatus(params).then(data=>{
                if(data.body.returnMsg == 'success'){
                    this.list = data.body.data.list
                }
                if (!this.list.length) {
                    this.judge = true
                }
            })
        },
        // 聊天列表切换
        chatListTab(id){
            this.list= []
            this.id = id
            this.chatType = id
            this.chatList()
        }
    }
}
</script>

<style scoped>
.homeListTab{
    height: .8rem;
    line-height: .9rem;
    overflow: hidden;
}
.reminder{
    text-align: center;
    margin-top: 60%;
    font-size: 18px;
    color: #ccc;
}
.homeListTab span{
    width: 50%;
    padding: 0;
    display: block;
}
</style>
